import React, { Component } from 'react';
import { Form, Button, Input } from 'antd';
const FormItem = Form.Item;
import Editor from '@/utils/Editor';
import { connect } from 'dva/index';
import { message } from 'antd/lib/index';
import { knowledgeDialogNodeInfo } from "@/services/dialog";
import UserSession from '@/UserSession';

@connect(({ dialogCommon, loading }) => ({
  dialogCommon,
  loading: loading.models.data,
}))
class DialogConfirmSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmValue: '',
      content: '',
      noConfirmValue: '',

      dialogId: props.dialogId,
      nodeId: props.nodeId,
      stage: props.stage,
      stageId: '',
    };
  }

  componentDidMount() {
    this.getInit();
  }

  getInit = async () => {
    const { nodeId, dialogId, stage } = this.state;
    const { dispatch } = this.props;

    if (UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogNodeInfo({
        dialogId: dialogId,
        nodeId: nodeId,
        nodeType: stage,
        field: 'setting',
      });
      this.setState({
        stageId: res.dialogStage.id,
        confirmValue: res.dialogStage.setting == null ? '' : res.dialogStage.setting.resultTitle,
        content: res.dialogStage.setting == null ? '' : res.dialogStage.setting.resultTemplate,
        noConfirmValue:
          res.dialogStage.setting == null ? '' : res.dialogStage.setting.noConfirmReply,
      });
    } else {
      dispatch({
        type: 'dialogCommon/getStage',
        payload: {
          dialogId: dialogId,
          nodeId: nodeId,
          stage: stage,
          field: 'setting',
          urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
        },
        callback: res => {
          this.setState({
            stageId: res.dialogStage.id,
            confirmValue: res.dialogStage.setting == null ? '' : res.dialogStage.setting.resultTitle,
            content: res.dialogStage.setting == null ? '' : res.dialogStage.setting.resultTemplate,
            noConfirmValue:
              res.dialogStage.setting == null ? '' : res.dialogStage.setting.noConfirmReply,
          });
        },
      });
    }
  };

  save = () => {
    const { dispatch } = this.props;
    const { stageId, stage } = this.state;
    const con = `editorRef`;
    const obj = {
      resultTitle: this.state.confirmValue,
      resultTemplateId: '',
      resultTemplate: this.refs[con].getUeditorContent(),
      noConfirmReply: this.state.noConfirmValue,
    };

    dispatch({
      type: 'dialogCommon/saveStage',
      payload: {
        id: stageId,
        field: 'setting',
        setting: obj,
        stage,
      },
      callback: res => {
        message.info(res.msg);
      },
    });
  };

  changeValue = (event, key) => {
    switch (key) {
      case 'confirmValue':
        this.setState({
          confirmValue: event.target.value,
        });
        break;
      case 'noConfirmValue':
        this.setState({
          noConfirmValue: event.target.value,
        });
        break;
    }
  };

  render() {
    return (
      <div>
        <div style={{ paddingLeft: '30px', marginTop: '15px' }}>
          信息确认话术&nbsp;&nbsp;
          <Input
            style={{ width: '60%' }}
            maxLength={100}
            placeholder=""
            value={this.state.confirmValue}
            onChange={event => {
              this.changeValue(event, 'confirmValue');
            }}
          />
        </div>

        <div
          className="fuwenben"
          style={{
            lineHeight: '20px',
            width: 640,
            zIndex: 1,
            paddingLeft: '30px',
            marginTop: '15px',
          }}
        >
          <p>信息展示模板</p>
          <Editor
            content={this.state.content}
            name="content"
            id="content"
            height="300"
            width="400"
            ref="editorRef"
          />
        </div>

        <div style={{ paddingLeft: '30px', marginTop: '15px' }}>
          不确认时回复话术&nbsp;&nbsp;
          <Input
            style={{ width: '60%' }}
            maxLength={100}
            placeholder=""
            value={this.state.noConfirmValue}
            onChange={event => {
              this.changeValue(event, 'noConfirmValue');
            }}
          />
        </div>

        <div style={{ paddingLeft: '30px', marginTop: '15px' }}>
          <Button type="primary" onClick={this.save} disabled={UserSession.isSystemKnowledge()}>
            保存
          </Button>
        </div>
      </div>
    );
  }
}

export default DialogConfirmSetting;
